<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/simJQ-2.2.min.js"></script>
    <script src="https://lol.qq.com/act/AutoCMS/publish/LOLAct/TFTequipment/TFTequipment.js"></script>
    <script src="https://lol.qq.com/act/AutoCMS/publish/LOLAct/TFTHeroesData/TFTHeroesData.js"></script>
    <script src="https://lol.qq.com/act/AutoCMS/publish/LOLAct/TFTjob/TFTjob.js"></script>
    <script src="https://lol.qq.com/act/AutoCMS/publish/LOLAct/TFTrace/TFTrace.js"></script>
    <link href="static/css/pure-min.css" rel="stylesheet" type="text/css"/>
    <!--http://www.purecss.cn/menus.html-->
    <!--https://leytton.gitee.io/simjq/-->
</head>
<body  id="body" >

<div class="main" id="main">
    <div onmousedown="external.hitCaption()" style="background-color: #129FEA;height: 10px;width: 100px" ></div>
    <div  class="pure-menu pure-menu-horizontal">
            <ul class="pure-menu-list equipment_bar" id="equipment_bar">
                <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                    <a href="#" id="menuLink1" class="pure-menu-link">
                        <img src="https://game.gtimg.cn/images/lol/tft/items/1038.png" alt="">
                    </a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
                    </ul>
                </li>
            </ul>
    </div>
</div>
</body>
<script>
    //初始化装备
    var equipmentArr=[1038,1043,1058,3070,1011,1031,1057,4000];
    var exequipmentArr1=[];
    var exequipmentArr=[];
    window.onload = function(){
        console.log(TFTrace_List);
        console.log(TFTequipment_List);

        var eqBaseHtml='';
        // var exequipmentArr={};
        for (var i in TFTequipment_List){
            if(TFTequipment_List[i]['eq_formula']!==""){
                var eqArr  = TFTequipment_List[i]['eq_formula'].split(',');
                if(eqArr.length=2){
                    if(exequipmentArr[eqArr[0]]===undefined)exequipmentArr[eqArr[0]]=[]
                    if(exequipmentArr[eqArr[1]]===undefined)exequipmentArr[eqArr[1]]=[]
                    exequipmentArr[eqArr[0]][eqArr[1]]=TFTequipment_List[i];
                    exequipmentArr[eqArr[1]][eqArr[0]]=TFTequipment_List[i];
                }
            }else{
                exequipmentArr1[TFTequipment_List[i]['equipmentId']] = TFTequipment_List[i];
            }
        }

        for (var i in TFTequipment_List){
            var equipmentId=TFTequipment_List[i]['equipmentId']
            if(in_array(equipmentId,equipmentArr)){
                eqBaseHtml +='<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">\n' +
                    '            <a href="#" id="equipment-'+equipmentId+'" class="pure-menu-link">\n' +
                    '            <img src="https://game.gtimg.cn/images/lol/tft/items/'+equipmentId+'.png" alt="" />\n'+
                    '<div class="info"><span>'+TFTequipment_List[i]["eq_name"]+'</span><br />'+TFTequipment_List[i]["eq_effect"]+'</div>\n'+
                    '            </a>\n' +
                    //合成装备
                    getEquipmentHtml(equipmentId)+
                    '        </li>';
            }
        }
        console.log(exequipmentArr);
        eqBaseHtml+='<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">'+
            '<a href="#" onclick="location.reload();" class="pure-menu-link">\n' +
            '                    刷新\n' +
            '                </a></li>'
        eqBaseHtml+='<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">'+
            '<a href="#" onclick="external.close();" class="pure-menu-link" style="color: #b94a48">\n' +
            '                    关闭\n' +
            '                </a></li>'
        $("#equipment_bar").html(eqBaseHtml);
    };
    function getEquipmentHtml(id){
        var eqHtml='';
        for(var j in equipmentArr){
            var a = exequipmentArr[id][equipmentArr[j]];
            eqHtml+='<li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="icon">+</span><img src="https://game.gtimg.cn/images/lol/tft/items/'+exequipmentArr1[equipmentArr[j]]['equipmentId']+'.png" alt="" /><span class="icon">=</span><img src="https://game.gtimg.cn/images/lol/tft/items/'+a['equipmentId']+'.png" alt="" /><div class="info hover"><span>'+a["eq_name"]+'</span><br />'+a["eq_effect"]+'</div></a></li>';
        }
        eqHtml = '<ul class="pure-menu-children">\n'+eqHtml+'</ul>'
        return eqHtml;
    }

    function in_array(search,array){
        for(var i in array){
            if(array[i]==search){
                return true;
            }
        }
        return false;
    }
//    var odiv=document.getElementById("body");
//    odiv.onmousemove=function(ev){
//        var ev=window.event||ev;
//        done(ev);
//    };
//
//    function done(ev){
//        $("#test1").html(getMousePos(ev).x+','+getMousePos(ev).y)
//    }
//    function getMousePos(ev) {
//        var scrollX = document.documentElement.scrollLeft;
//        var scrollY = document.documentElement.scrollTop;
//        var x = ev.pageX || ev.clientX + scrollX;
//        var y = ev.pageY || ev.clientY + scrollY;
//        return { 'x': x, 'y': y };
//    }
//    document.body.addEventListener("touchstart", function(){ });
</script>
<style>
    img {
        border: 0;
        border-radius: 1em;
        width: 2.5em;
        height:2.5em;
    }
    .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after{
        display: none;
    }
    .pure-menu-disabled, .pure-menu-heading, .pure-menu-link {
        padding: 0;
    }
    .pure-menu-item {
        margin: 0px;
        /*background-color: #fff*/
    }
    .equipment_bar a:hover .pure-menu-disabled, .pure-menu-heading, .pure-menu-link {
        padding: .3em;
    }
    .equipment_bar .info{
        display: inline-block;
        vertical-align: top;
        /*width: 0;*/
        overflow: hidden;
        display: none;
    }
    .equipment_bar .info span{
        font-size: 1em;
        font-weight: bold;
        line-height: 2em;
    }
    .equipment_bar a:hover .info, .equipment_bar a .info.hover{
        display: inline-block;
        padding: 0 15px;
        width: auto;
        transition: width .3s,padding .3s,color .3s;
    }
    .pure-menu-children,.pure-menu-children .pure-menu-item  {
        background-color: transparent!important;
    }
    .pure-menu-children * {
        color: #000;
        text-shadow: 0px 0px 15px #fff;
    }
    .main{
        margin: 1rem;width: min-content; display: block;

    }
    ul.equipment_bar{
        border: 20px solid rgba(0,0,0,.01);
        border-top: 0;
    }
    .equipment_bar a .icon{
        line-height: 2rem;
    }
    ul.pure-menu-children{
        border-left: 10px solid #129FEA;
    }
    .equipment_bar>a:hover.pure-menu-link{
        border-left: 10px solid #129FEA;
        background-color: rgba(0,0,0,.01);
    }
</style>
</html>
